import React, { memo } from 'react'
import type { FC, ReactNode } from 'react'

import { AreaHeaderWrapper } from './style'
import { Link } from 'react-router-dom'

interface IProps {
  children?: ReactNode
  title: string
  keywords?: any[]
  moreText?: string
  moreLink?: string,
  isRight?: boolean
}

const AreaHeader: FC<IProps> = (porps) => {
  const {
    title = '默认标题',
    keywords = [],
    moreText = '更多',
    moreLink = '/',
    isRight = true
  } = porps

  return (
    <AreaHeaderWrapper className="sprite_02">
      <div className="left">
        <h3 className="title">{title}</h3>
        <div className="keywords">
          {keywords.map((item) => {
            return (
              <div className="item" key={item}>
                <a href={item.url} className="link">
                  {item}
                </a>
                <span className="divider">|</span>
              </div>
            )
          })}
        </div>
      </div>
      {
        isRight && (
          <div className="right">
            <Link to={moreLink} className="more">
              {moreText}
              <i className="iconfont icon-right"></i>
            </Link>
          </div>
        )
      }
    </AreaHeaderWrapper>
  )
}

export default memo(AreaHeader)
